<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品竞品分析系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <style>
        :root {
            --primary-color: #5e72e4;
            --primary-dark: #4a5fd0;
            --secondary-color: #ff7eb3;
            --accent-color: #11cdef;
            --light-color: #f8f9fe;
            --dark-color: #32325d;
            --success-color: #2dcb73;
            --warning-color: #fb6340;
            --danger-color: #f5365c;
            --info-color: #6a9ef7;
            --pink-gradient: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
            --blue-gradient: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
            --green-gradient: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        body {
            background-color: #f8f9fe;
            font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--dark-color);
        }
        .banner {
            background: var(--blue-gradient);
            color: white;
            padding: 6rem 0 10rem;
            margin-bottom: 6rem;
            position: relative;
            overflow: hidden;
            border-radius: 0 0 15% 15%;
        }
        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://img.freepik.com/free-vector/network-mesh-wire-digital-technology-background_1017-27428.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.2;
            z-index: 0;
        }
        .banner-content {
            position: relative;
            z-index: 1;
        }
        .banner h1 {
            font-weight: 800;
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(to right, #fff, #e6e9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
        }
        .banner .lead {
            font-size: 1.4rem;
            opacity: 0.95;
            margin-bottom: 2.5rem;
            max-width: 90%;
            line-height: 1.6;
        }
        .banner-image {
            transform: perspective(1000px) rotateY(-10deg);
            box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.3);
            transition: all 0.5s ease;
            border-radius: 20px;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% {
                transform: perspective(1000px) rotateY(-10deg) translateY(0px);
            }
            50% {
                transform: perspective(1000px) rotateY(-5deg) translateY(-15px);
            }
            100% {
                transform: perspective(1000px) rotateY(-10deg) translateY(0px);
            }
        }
        .banner-image:hover {
            transform: perspective(1000px) rotateY(0deg);
        }
        .section-title {
            position: relative;
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            font-size: 2.2rem;
        }
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--pink-gradient);
            border-radius: 2px;
        }
        .section-description {
            color: #8898aa;
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 3rem;
            line-height: 1.7;
        }
        
        /* 案例卡片样式 */
        .case-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
            transition: all 0.4s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .case-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(50, 50, 93, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .case-image {
            position: relative;
            height: 220px;
            overflow: hidden;
        }
        .case-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        .case-card:hover .case-image img {
            transform: scale(1.1);
        }
        .case-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--pink-gradient);
            color: white;
            padding: 6px 15px;
            border-radius: 25px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            box-shadow: 0 5px 15px rgba(245, 87, 108, 0.3);
        }
        .case-content {
            padding: 2rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .case-content h4 {
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--dark-color);
            font-size: 1.3rem;
        }
        .case-content p {
            color: #8898aa;
            margin-bottom: 1.5rem;
            flex-grow: 1;
            line-height: 1.7;
        }
        .case-footer {
            display: flex;
            justify-content: space-between;
            color: #adb5bd;
        }
        .case-stat {
            font-size: 0.9rem;
            background: #f6f9fc;
            padding: 5px 12px;
            border-radius: 15px;
            font-weight: 600;
        }
        .case-stat i {
            margin-right: 5px;
            color: var(--primary-color);
        }
        
        /* 功能特点卡片 */
        .feature-card {
            background: white;
            padding: 2.5rem 1.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--pink-gradient);
            z-index: -1;
        }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(50, 50, 93, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }
        .feature-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 1.8rem;
            background: var(--green-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 20px rgba(50, 50, 93, 0.15);
            transition: all 0.4s ease;
        }
        .feature-icon i {
            font-size: 2.2rem;
            color: white;
        }
        .feature-card h4 {
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--dark-color);
            font-size: 1.25rem;
        }
        .feature-card p {
            color: #8898aa;
            font-size: 1rem;
            line-height: 1.7;
        }
        
        /* 其他样式优化 */
        .btn-create {
            background: var(--pink-gradient);
            border: none;
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 50px;
            box-shadow: 0 7px 15px rgba(245, 87, 108, 0.4);
            letter-spacing: 0.5px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        .btn-create:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(245, 87, 108, 0.5);
        }
        .btn-create:active {
            transform: translateY(1px);
        }
        
        .stat-card {
            background-color: white;
            border-radius: 20px;
            padding: 2rem;
            margin: 0 1rem;
            min-width: 220px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
            transition: all 0.3s ease;
            border-bottom: 5px solid transparent;
        }
        .stat-card:nth-child(1) {
            border-bottom-color: var(--primary-color);
        }
        .stat-card:nth-child(2) {
            border-bottom-color: var(--secondary-color);
        }
        .stat-card:nth-child(3) {
            border-bottom-color: var(--accent-color);
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(50, 50, 93, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            background: var(--blue-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            line-height: 1;
        }
        .stat-label {
            font-size: 1.1rem;
            color: #8898aa;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer {
            background: #32325d;
            color: white;
            padding: 4rem 0 2rem;
            margin-top: 6rem;
            position: relative;
            overflow: hidden;
        }
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--pink-gradient);
        }
        .footer h5 {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: white;
        }
        .footer p {
            color: rgba(255,255,255,0.7);
            line-height: 1.7;
        }
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        .footer-links a, .footer-contact li {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
            display: block;
        }
        .footer-links a:hover {
            color: var(--secondary-color);
            transform: translateX(5px);
        }
        .footer-contact li {
            margin-bottom: 1rem;
        }
        .footer .btn-outline-light {
            width: 36px;
            height: 36px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .footer .btn-outline-light:hover {
            background: var(--pink-gradient);
            border-color: transparent;
            transform: translateY(-3px);
        }
        .footer hr {
            opacity: 0.1;
        }
        .footer .list-inline-item:not(:last-child) {
            margin-right: 1.5rem;
        }
        .footer .list-inline-item a {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .footer .list-inline-item a:hover {
            color: var(--secondary-color);
        }
        
        /* 花纹装饰 */
        .decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 0;
        }
        .circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
        }
        .circle-1 {
            width: 300px;
            height: 300px;
            top: -100px;
            right: -50px;
        }
        .circle-2 {
            width: 200px;
            height: 200px;
            bottom: -50px;
            left: 10%;
        }
        .circle-3 {
            width: 100px;
            height: 100px;
            top: 30%;
            left: 20%;
        }
        
        /* 添加欢迎弹窗样式 */
        .welcome-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
        }
        
        .welcome-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .welcome-content {
            width: 90%;
            max-width: 500px;
            background: white;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            position: relative;
            transform: translateY(-50px) scale(0.9);
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            background-image: linear-gradient(120deg, #f6f9ff 0%, #fff9fb 100%);
            border: 1px solid rgba(255, 126, 179, 0.3);
        }
        
        .welcome-modal.show .welcome-content {
            transform: translateY(0) scale(1);
        }
        
        .welcome-icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            background: var(--pink-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
            box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
        }
        
        .welcome-greeting {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 15px;
            background: var(--blue-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .welcome-message {
            font-size: 1.2rem;
            color: #8898aa;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .welcome-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #adb5bd;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .welcome-close:hover {
            color: var(--secondary-color);
            transform: rotate(90deg);
        }
        
        .btn-welcome {
            background: var(--blue-gradient);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            box-shadow: 0 10px 20px rgba(94, 114, 228, 0.3);
            transition: all 0.3s ease;
        }
        
        .btn-welcome:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(94, 114, 228, 0.4);
        }
        
        /* 添加顶部按钮样式 */
        .top-actions {
            position: absolute;
            top: 20px;
            right: 30px;
            z-index: 100;
        }
        
        .btn-start-now {
            background: white;
            color: var(--primary-color);
            font-weight: 700;
            padding: 12px 25px;
            border-radius: 50px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: none;
            font-size: 1rem;
        }
        
        .btn-start-now:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            background: #f8f9fe;
        }
        
        .btn-start-now i {
            margin-right: 8px;
        }
        
        @media (max-width: 768px) {
            .top-actions {
                position: relative;
                top: 0;
                right: 0;
                display: flex;
                justify-content: center;
                margin-top: 20px;
                margin-bottom: -20px;
            }
        }
    </style>
</head>
<body>
    <!-- 欢迎弹窗 -->
    <div class="modal fade" id="welcomeModal" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 20px; border: 2px solid #ff7eb3; box-shadow: 0 15px 35px rgba(245, 87, 108, 0.4);">
                <div class="modal-header" style="background: var(--pink-gradient); border-bottom: 0; border-radius: 18px 18px 0 0;">
                    <h5 class="modal-title" id="welcomeModalLabel" style="color: white; font-weight: 700; font-size: 1.3rem;">
                        <i class="fas fa-heart me-2"></i> 欢迎光临
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center pt-4 pb-4">
                    <div class="mb-4">
                        <img src="https://img.freepik.com/free-vector/cute-cat-waving-paw-cartoon-vector-icon-illustration-animal-nature-icon-concept-isolated-premium-vector-flat-cartoon-style_138676-4063.jpg" 
                             alt="可爱问候" 
                             style="width: 150px; height: 150px; border-radius: 50%; border: 3px solid #ff7eb3; box-shadow: 0 10px 20px rgba(245, 87, 108, 0.2);">
                    </div>
                    <p class="fs-4 fw-bold mb-2" style="color: var(--dark-color);" id="greeting">早上好，胡小姐！(❁´◡`❁)</p>
                    <p class="fs-6" style="color: #8898aa;">今天也要元气满满哦！分析这么多竞品，辛苦啦～</p>
                </div>
                <div class="modal-footer border-0 d-flex justify-content-center pb-4">
                    <button type="button" class="btn btn-lg" data-bs-dismiss="modal" 
                            style="background: var(--pink-gradient); color: white; border-radius: 50px; padding: 8px 30px; font-weight: 600; box-shadow: 0 8px 15px rgba(245, 87, 108, 0.3);">
                        开始美好一天 <i class="fas fa-heart ms-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 顶部Banner -->
    <div class="banner">
        <div class="decoration">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-3"></div>
        </div>
        
        <!-- 顶部立即开始按钮 -->
        <div class="top-actions">
            <a href="/products" class="btn btn-start-now">
                <i class="fas fa-rocket"></i> 立即开始
            </a>
        </div>
        
        <div class="container banner-content">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h1>跨境电商竞品分析系统</h1>
                    <p class="lead mb-5">基于人工智能技术，快速分析海外竞争产品特性，助您一键掌握市场动态，抢占外贸市场先机</p>
                    <div class="d-flex gap-3">
                        <a href="/products" class="btn btn-light btn-lg btn-create">
                            <i class="fas fa-rocket me-2"></i> 开始竞品分析
                        </a>
                        <a href="/create-product" class="btn btn-primary btn-lg">
                            <i class="fas fa-chart-line me-2"></i> 立即分析
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                    <img src="https://img.freepik.com/free-vector/data-extraction-concept-illustration_114360-4866.jpg" class="img-fluid rounded-3 banner-image" alt="商品分析">
                </div>
            </div>
        </div>
    </div>

    <div class="container mb-5">
        <!-- 成功案例 -->
        <section class="mb-5 case-studies">
            <h2 class="section-title text-center mb-4">海外竞品分析精选案例</h2>
            <p class="section-description text-center mb-5">查看我们为各行业跨境电商提供的竞品分析案例，助力您的全球市场洞察</p>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/wireless-earphones-levitating-blue-background-advertisement-banner_53876-102283.jpg" alt="耳机产品分析" class="img-fluid">
                            <div class="case-tag">亚马逊热销</div>
                        </div>
                        <div class="case-content">
                            <h4>北美TWS耳机市场分析</h4>
                            <p>分析亚马逊平台Top5蓝牙耳机品牌特点，结合美国消费者评价，挖掘爆款产品背后的关键因素。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 15张图片</span>
                                <span class="case-stat"><i class="fas fa-trophy"></i> 热销品</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/cosmetic-packaging-mockup_53876-97163.jpg" alt="美妆产品分析" class="img-fluid">
                            <div class="case-tag">欧洲市场</div>
                        </div>
                        <div class="case-content">
                            <h4>欧洲有机护肤品分析</h4>
                            <p>解析德国主流线上平台有机护肤品成分与包装，挖掘欧洲环保理念下的产品设计趋势与消费者偏好。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 18张图片</span>
                                <span class="case-stat"><i class="fas fa-award"></i> 高端市场</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/top-view-food-frame-with-copy-space_23-2148723447.jpg" alt="食品分析" class="img-fluid">
                            <div class="case-tag">东南亚市场</div>
                        </div>
                        <div class="case-content">
                            <h4>东南亚休闲零食趋势</h4>
                            <p>剖析Shopee平台爆款零食品类，了解东南亚消费者口味偏好与包装设计心理，把握市场切入点。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 12张图片</span>
                                <span class="case-stat"><i class="fas fa-shopping-cart"></i> 高转化率</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-4">
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/person-using-tablet-close-up_23-2149899007.jpg" alt="电子产品分析" class="img-fluid">
                            <div class="case-tag">日本市场</div>
                        </div>
                        <div class="case-content">
                            <h4>日本平板支架市场分析</h4>
                            <p>对比分析日本乐天热销平板支架，揭示日本消费者对便携性、材质与多功能性的独特需求。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 10张图片</span>
                                <span class="case-stat"><i class="fas fa-percentage"></i> 利润空间大</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/sport-running-shoes_1203-3414.jpg" alt="运动鞋分析" class="img-fluid">
                            <div class="case-tag">北美市场</div>
                        </div>
                        <div class="case-content">
                            <h4>北美轻量跑鞋竞品分析</h4>
                            <p>深入分析eBay平台中轻量跑鞋卖点与评价，挖掘北美消费者对舒适度、透气性与环保材质的重视程度。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 16张图片</span>
                                <span class="case-stat"><i class="fas fa-bolt"></i> 快速增长</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="case-card">
                        <div class="case-image">
                            <img src="https://img.freepik.com/free-photo/people-making-their-home-look-beautiful_23-2149089556.jpg" alt="家居产品分析" class="img-fluid">
                            <div class="case-tag">澳新市场</div>
                        </div>
                        <div class="case-content">
                            <h4>澳洲简约家居装饰品分析</h4>
                            <p>解析澳洲本土与进口家居装饰品风格差异，把握澳新市场消费者对自然材质与环保理念的追求。</p>
                            <div class="case-footer">
                                <span class="case-stat"><i class="fas fa-image"></i> 14张图片</span>
                                <span class="case-stat"><i class="fas fa-star"></i> 高评分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能特点 -->
        <section class="mb-5 features-section">
            <h2 class="section-title text-center mb-4">智能跨境分析功能</h2>
            <p class="section-description text-center mb-5">专为外贸卖家打造的全方位竞品分析工具，让您的产品决策更精准高效</p>
            
            <div class="row">
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h4>跨语言OCR识别</h4>
                        <p>自动识别多国语言产品图片文字，一键提取包装信息、成分与卖点</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h4>AI竞品智能分析</h4>
                        <p>基于大模型的自动分析，深入挖掘竞品关键特性与消费者偏好</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4>多维竞争力分析</h4>
                        <p>从特性、价格、评价等多角度分析竞品优劣势，找准市场定位</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h4>一键生成分析报告</h4>
                        <p>智能生成结构化分析报告，直观展示产品优化方向与市场机会</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5><i class="fas fa-globe-asia me-2"></i> 跨境电商竞品分析系统</h5>
                    <p>基于AI技术的外贸产品分析工具，助力您的全球市场拓展</p>
                    <div class="d-flex mt-4">
                        <a href="#" class="btn btn-outline-light btn-sm me-2 rounded-circle">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="btn btn-outline-light btn-sm me-2 rounded-circle">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-outline-light btn-sm me-2 rounded-circle">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="btn btn-outline-light btn-sm rounded-circle">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>分析服务</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>亚马逊竞品分析</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>欧洲市场分析</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>东南亚市场分析</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>日本市场分析</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>创建分析</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>分析案例</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>使用教程</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right me-2"></i>关于我们</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h5>联系我们</h5>
                    <ul class="list-unstyled footer-contact">
                        <li><i class="fas fa-envelope me-2"></i> contact@analysis.com</li>
                        <li><i class="fas fa-phone-alt me-2"></i> +1 (888) 123-4567</li>
                        <li><i class="fas fa-map-marker-alt me-2"></i> 深圳市南山区科技园</li>
                    </ul>
                </div>
            </div>
            <hr class="mt-4 mb-4" style="border-color: rgba(255,255,255,0.1);">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-md-0">&copy; 2023 跨境电商竞品分析系统 | 助力外贸决策</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="#">条款</a></li>
                        <li class="list-inline-item"><a href="#">隐私</a></li>
                        <li class="list-inline-item"><a href="#">支持</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 显示欢迎弹窗并根据时间设置问候语
        document.addEventListener('DOMContentLoaded', function() {
            const welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'));
            welcomeModal.show();
            
            // 根据时间设置不同的问候语
            const hour = new Date().getHours();
            const greetingElement = document.getElementById('greeting');
            let greeting = '';
            let emoji = '';
            
            if (hour >= 5 && hour < 9) {
                greeting = '早安，胡小姐！';
                emoji = '(๑>ᴗ<๑) 新的一天开始啦！';
            } else if (hour >= 9 && hour < 12) {
                greeting = '上午好，胡小姐！';
                emoji = '(≧∀≦)ゞ 今天也要加油哦！';
            } else if (hour >= 12 && hour < 14) {
                greeting = '中午好，胡小姐！';
                emoji = '(●°u°●)​ 」 记得吃午饭呀～';
            } else if (hour >= 14 && hour < 18) {
                greeting = '下午好，胡小姐！';
                emoji = '(✿◡‿◡) 喝杯奶茶续续力吧！';
            } else if (hour >= 18 && hour < 22) {
                greeting = '晚上好，胡小姐！';
                emoji = '(✧∀✧)/ 辛苦工作一天啦！';
            } else {
                greeting = '夜深了，胡小姐！';
                emoji = '(｡･ω･｡) 早点休息哦～';
            }
            
            greetingElement.innerHTML = greeting + '<br><span style="font-size: 0.9rem; opacity: 0.9;">' + emoji + '</span>';
        });
    </script>
</body>
</html> 